<template >
  <div class="record-tabs">
    <div class="tab-choose">
      <div class="tab-box">
        <p :class="{ 'active': activeIndex === 0 }" @click="activeIndex = 0">Exchange</p>
        <p class="center" :class="{ 'active': activeIndex === 1 }" @click="activeIndex = 1">Withdrawal</p>
        <p :class="{ 'active': activeIndex === 2 }" @click="activeIndex = 2">Mining</p>
      </div>
    </div>
    <div class="tab-container">
      <Convert v-show="activeIndex === 0" :list="list1" />
      <Convert v-show="activeIndex === 1" />
      <Convert v-show="activeIndex === 2" :list="list2" />
    </div>
  </div>
</template>

<script>
import Convert from "./convert.vue"

export default {
  components: {
    Convert
  },
  data () {
    return {
      activeIndex: 0,
      list1: [
        {
          title: "ExchangeETH",
          time: "2023-01-12 13:52:35",
          price: "+13954.10 USDT",
          consume: "-10 ETH"
        }
      ],
      list2: [
        {
          title: "Rewards",
          time: "2023-01-12 13:52:35",
          price: "+10.000000 ETH",
          consume: null
        },
        {
          title: "Rewards",
          time: "2023-01-12 13:52:35",
          price: "+10000.000000 ETH",
          consume: null
        }
      ]
    }
  },
  methods: {}
}
</script>

<style lang="scss" >
.record-tabs {
  width: 100%;
  z-index: 9;
  display: flex;
  flex-direction: column;

  .tab-choose {
    background-color: #f5f5f5;
    padding: rem(20) 0;
    width: 100%;

    .tab-box {
      position: relative;
      @include between;
      width: rem(345);
      height: rem(44);
      background: #fff;
      border-radius: rem(8);
      box-shadow: rem(2) rem(4) rem(8) rgb(190 178 213 / 50%);
      margin: 0 auto;

      p {
        font-size: rem(16);
        height: rem(44);
        flex: 1;
        position: relative;
        @include center;
        color: #999;
      }

      .center::after {
        content: "";
        width: rem(1);
        height: rem(22);
        background: #e5e5e5;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }

      .center::before {
        content: "";
        width: rem(1);
        height: rem(22);
        background: #e5e5e5;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }

      .active {
        color: #333;
        font-weight: 700;
      }
    }
  }



  .tab-container {
    width: 100%;
    height: 100%;
  }
}
</style>
